<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>缓存管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <div>
      <button type="button" class="layui-btn" id="del-cache">清除缓存</button>
    </div>
    <table class="layui-hide" id="js-cacheInfo" lay-filter="cacheTable"></table>


<script src="/layui/layui.js" charset="utf-8"></script>
<script src="/js/layui-common.js"></script>
<script src="/js/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="/js/main.js"></script>
<script type="text/html" id="cacheOperBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use(['element', 'table'], function(){
        var table = layui.table;
        table.render({
             elem: '#js-cacheInfo'
            ,url:'/cache/queryCacheInfo'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                ,groups: 5 //只显示 1 个连续页码
                ,first: true //不显示首页
                ,last: true //不显示尾页
            }
            ,method: 'POST'
            ,cellMinWidth: 120 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [
                [
                    {field:'cacheKey',width:'90%', title:'缓存key'}
                    ,{fixed:'right',width:'10%',align:'center', title:'操作', toolbar:'#cacheOperBar'}
                ]
            ]
        });

        //监听工具条
        table.on('tool(cacheTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.cacheKey + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            }
        });

        $('#del-cache').on('click',function () {
            layer.confirm('删除所有缓存吗?', function(index){
                flushAll();
                table.reload('js-cacheInfo', {
                    url: '/cache/queryCacheInfo'
                    ,where: {} //设定异步数据接口的额外参数
                });
            });
        })
    });





    function flushAll() {
        $.ajax({
            type: 'GET',
            url: '/cache/flushAll',
            success: function (res) {
                if('200' == res.code) {
                    layer.msg('清除缓存成功', {icon: 1,time: 2000});
                }else {
                    layer.msg('清除缓存异常:' + res.msg, {icon: 2});
                }
            }
        });
    }
</script>

</body>
</html>